class MyModal extends HTMLElement {
  constructor() {
    // 必须首先调用 super方法
    super()
    // 获得html模版放到shadowRoot
    const shadowRoot = this.attachShadow({ mode: 'open' })
    this.setContent(shadowRoot)

    // 弹窗控制
    this.modalMask = shadowRoot.querySelector('.modal-mask')
    this.modalBody = shadowRoot.querySelector('.modal-body')
    this.ticketTitle = shadowRoot.querySelector('.ticket-title')

    // 监听属性值变化,
    // new MutationObserver((mutations) => {
    //   if (mutations[0].attributeName === 'visible') {
    //     this.openAClose()
    //   }
    // }).observe(this, {
    //   attributes: true,
    //   attributeFilter: ['visible', 'title'],
    // })

    const closeBtn = shadowRoot.querySelector('button.close-btn')
    // 界面操作
    closeBtn.addEventListener('click', () => {
      this.setAttribute('visible', false)
    })
  }
  // template写在HTML中
  setContent(shadowRoot) {
    const content = document.getElementById('my-modal').content.cloneNode(true)
    shadowRoot.appendChild(content)
  }
  // template写在JS中
  setContentByTemplate(shadowRoot) {
    const template = document.createElement('template')
    template.innerHTML = `` // 把模版字符串写在这里
    const content = template.content.cloneNode(true)
    shadowRoot.appendChild(content)
  }
  openAClose() {
    if (this.getAttribute('visible') === 'true') {
      this.modalMask.style.display = 'block'
      this.modalBody.style.display = 'block'
    } else {
      this.modalMask.style.display = 'none'
      this.modalBody.style.display = 'none'
      this.dispatchEvent(new CustomEvent('closeclose', { detail: 'button' })) // 关闭窗口事件,要传的数据填到第二个参数中
    }
  }
  // 监听到变化后的处理
  attributeChangedCallback(key, oldVal, newVal) {
    switch (key) {
      case 'title':
        this.ticketTitle.innerHTML = newVal
        break
      case 'visible':
        this.openAClose()
        break
    }
  }
  // 设置需要监听的数据（在constructor写MutationObserver可以监听变化的数据，但是不能获得初始化的数据）
  static get observedAttributes() {
    return ['title', 'visible']
  }
}
customElements.define('my-modal', MyModal)
